<template>
    <div>
        <header class="login-header">
            <div class="container m-top-20">
                <h1 class="logo">
                    <RouterLink to="/">小兔鲜商城</RouterLink>
                </h1>
                <div class="test">
                <RouterLink class="entry" to="/">
                    进入网站首页
                    <i class="iconfont icon-angle-right"></i>
                    <i class="iconfont icon-angle-right"></i>
                </RouterLink>
                </div>
            </div>
        </header>
        <section class="login-section">
            <div class="wrapper">
                <nav>
                    <a href="javascript:;">账户登录</a>
                </nav>
                <div class="account-box">
                    <div class="form">
                        <el-form ref="formRef" :model="form" :rules="rules" label-positon="right" label-width="60px" status-icon>
                            <el-form-item label="账户" prop="account">
                                <el-input v-model="form.account"/>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="form.password" show-password/>
                            </el-form-item>
                            <el-form-item label-width="22px" prop="agree">
                                <el-checkbox size="large" v-model="form.agree">
                                    我已同意隐私条款和服务条款
                                </el-checkbox>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="large" class="subBtn" @click="dologin">点击登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </section>
        <footer class="login-footer">
            <div class="container">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript::">友情链接</a>
                </p>
                <p>CopyRight &copy; 小兔鲜商城</p>
            </div>
        </footer>
    </div>
</template>

<script setup>

import { reactive,ref } from 'vue'
import { loginAPI } from '@/apis/user'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import router from '@/router';
import { useUserStore } from '@/stores/userStore'

    //准备表单对象
    const form = reactive({
        account:'heima290',
        password:'hm#qd@23!',
        agree:true
    })
    //规则数据对象
    const rules = {
        account:[
            {required:true,message:'用户名不能为空',trigger:'blur'},
        ],
        password:[
            {required:true,message:'密码不能为空',trigger:'blur'},
            {min:6,max:14,message:'密码长度要求6-14个字符',trigger:'blur'}
        ],
        //自定义校验规则
        agree:[
            {
                validator(rule,value,callback) {
                    if(value) {
                        callback()
                    }else {
                        callback(new Error('请勾选协议'))
                    }
                }
            }
        ]
    }

    //form实例统一校验
    const formRef = ref()
    const userStore = useUserStore()

    const dologin = () => {
        formRef.value.validate( async (valid) => {
            if(valid) {
                const { account,password }  = form

                await userStore.getUserInfo({account,password})

                ElMessage({type:'success',message:'登录成功'})
                router.replace({path:'/'})
            }
        })
    }

    

</script>

<style lang="scss" scoped>
    .login-header {
        background-color: #fff;
        border-bottom: 1px solid #e4e4e4;
        .container {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            .logo {
                width: 200px;

                a{
                    display: block;
                    height: 132px;
                    width: 100%;
                    text-indent: -9999px;
                    background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
                }
            }

            .entry {
                width: 120px;
                margin-bottom: 38px;
                font-size: 16px;
                
                i {
                    font-size: 14px;
                    color: $xtxColor;
                    letter-spacing: -5px;
                }
            }
        }
    }

    .login-section {
        background: url('@/assets/images/login-bg.png') no-repeat center / cover;
        height: 488px;
        position: relative;

        .wrapper {
            width: 380px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 54px;
            transform: translate3d(100px,0,0);
            box-shadow: 0 0 10px rgba(0,0,0,0.15);

            nav {
                font-size: 14px;
                height: 55px;
                margin-bottom: 20px;
                border-bottom: 1px solid #f5f5f5;
                display: flex;
                padding: 0 40px;
                text-align: right;
                align-items: center;

                a {
                    flex: 1;
                    line-height: 1;
                    display: inline-block;
                    font-size: 18px;
                    position: relative;
                    text-align: center;
                }
            }
        }
    }

    .login-footer {
        padding: 30px 0 50px;
        background: #fff;

        p {
            text-align: center;
            color: #999;
            padding-top: 20px;

            a {
                // line-height: 1px;
                padding: 0 10px;
                color: #999;
                // display: inline-block;

                ~a {
                    border-left: 1px solid #ccc;
                }
            }
        }
    }

    .account-box {
    
        .form {
            padding: 0 20px 20px 20px;

            
        }
    }

    .subBtn {
        background-color: $xtxColor;
        width: 100%;
        color: #fff;
    }


</style>